<script setup lang="ts">
import {
  Sidebar,
  SidebarContent,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
} from "@/components/ui/sidebar";
import {
  Upload,
  Image,
  FileText,
  History,
  Star,
  MessageSquare,
  Expand,
  LogOut,
  User,
} from "lucide-vue-next";
import { RouterLink, useRoute, useRouter } from "vue-router";
import { computed } from "vue";
import { getCurrentUser, logout, formatRemainingTime } from "../utils/auth";

const $route = useRoute();
const $router = useRouter();

const menu = [
  { path: "/", label: "上传", icon: Upload },
  { path: "/material", label: "素材库", icon: Image },
  { path: "/copywriting", label: "文案生成", icon: MessageSquare },
  { path: "/expand", label: "图片扩展", icon: Expand },
  { path: "/export", label: "图文导出", icon: FileText },
  { path: "/history", label: "历史记录", icon: History },
  { path: "/favorite", label: "收藏夹", icon: Star },
];

// 获取当前用户信息
const currentUser = computed(() => getCurrentUser());
const remainingTime = computed(() => formatRemainingTime());

// 登出
function handleLogout() {
  logout();
  $router.push("/login");
}
</script>

<template>
  <Sidebar class="border-r-0 flex flex-col">
    <SidebarHeader class="p-2 flex-1">
      <div class="flex items-center gap-1">
        <img src="../assets/soft.png" alt="" class="size-8 rounded-md" />
        <div class="flex flex-col">
          <div class="ml-2 text-xl font-semibold text-yellow-800">智图工坊</div>
          <div class="ml-2 text-sm text-gray-500">Smart Map Workshop</div>
        </div>
      </div>

      <SidebarMenu>
        <SidebarMenuItem v-for="item in menu" :key="item.path">
          <SidebarMenuButton asChild>
            <RouterLink
              :to="item.path"
              class="flex items-center gap-2 w-full px-3 py-2 rounded transition font-normal"
              :class="{
                'bg-primary/10 text-primary font-semibold':
                  $route.path === item.path,
              }"
            >
              <component :is="item.icon" class="w-4 h-4" />
              <span>{{ item.label }}</span>
            </RouterLink>
          </SidebarMenuButton>
        </SidebarMenuItem>
      </SidebarMenu>
    </SidebarHeader>

    <!-- 登出按钮 - 固定在底部 -->
    <div class="p-2">
      <SidebarMenuButton
        @click="handleLogout"
        class="flex items-center gap-2 w-full px-3 py-2 rounded transition font-normal bg-primary/10 text-primary hover:bg-primary/20 hover:text-primary"
      >
        <LogOut class="w-4 h-4" />
        <span>登出</span>
      </SidebarMenuButton>
    </div>
  </Sidebar>
</template>
